<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
      <div>内容1</div>
    </div>
  </div>
</template>

<script>
  import BScroll from "better-scroll"
  export default {
    name: "Test",
    data() {
      return {
        scroll: null
      }
    },
    mounted() {
        //通过document.querySelector()获取的元素不够准确，在Vue中通过给元素绑定ref的方式更准确
        this.scroll = new BScroll(this.$refs.wrapper, {
          click: true
        })
    },
    methods: {
      scrollTo(x, y, time) {
        this.scroll.scrollTo(x, y, time)
      }
    }
  }
</script>

<style scoped>
.content>div{
  height: 100px;
  background-color: #ddd;
  margin: 10px;
}
</style>
